<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>设计中心制作一部-文件管理</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<meta name="apple-mobile-web-app-capable" content="yes" />

		<style type="text/css">
			BODY,
			HTML {
				padding: 0px;
				margin: 0px;
			}
			BODY {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				/*font-size: 11px;*/
				background: #EEE;
				padding: 10px;
			}
			
			.example {
			}
			
			.demo {
				/*height: 500px;*/
				background: #FFF;
				overflow: scroll;
				padding: 5px;
			}

			.openImg,.openImg .ui-dialog-titlebar {
			    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
			    border: medium none;
			}

			#imgshow{
				/*border: 10px solid #ccc;*/

				position: absolute;
			 }
			#imgshow img{}

			#closeImg{position: absolute;font-size: 1.5em;cursor: pointer;padding: 5px; right: -35px;top: -35px;}
			.bgclass {
				display: none;
			    background: none repeat scroll 0 0 #aaa;
			    height: 100%;
			    left: 0;
			    opacity: 0.5;
			    position: absolute;
			    top: 0;
			    width: 100%;
			}
		</style>
		
		
		<script src="xiaoshen/jstree/jquery.js"></script>
		<script src="xiaoshen/jstree/jquery.easing.js" type="text/javascript"></script>
		<script src="xiaoshen/jstree/jqueryFileTree.js" type="text/javascript"></script>
		<link href="xiaoshen/jstree/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
		<link rel="stylesheet" href="xiaoshen/jstree/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="xiaoshen/jstree/dora.css">
		<script type="text/javascript">
			
			$(document).ready( function() {

				// 初始化框架的高度
				$(".demo").css({
					'height': (document.documentElement.clientHeight - 30)+'px'
				});

				var imgul = $("li.ext_png");
				$('#fileTreeDemo_1').fileTree({ root: '/',script: 'xiaoshen/jstree/jqueryFileTree.asp',}, function(file) { 
					var startIndex = file.indexOf(".");
					var fileType = file.substring(startIndex+1,startIndex.length);
					var imgType = new Array("jpg","png","jpeg","gif");
					for (var i = imgType.length - 1; i >= 0; i--) {
						if(fileType == imgType[i])
						{
							$(".bgclass").show().click(function() {
								$(".bgclass").hide();
								$("#imgshow").hide();
							});
							$("#imgshow").html("<img src="+file+" />");
							resizeImg();
							$("#imgshow").show().click(function() {
								$(".bgclass").hide();
								$(this).hide();
							});

						}
					};

					if(fileType == "html" || fileType == "htm"){
						window.open(file); 
					}
				});
				
			});

			function resizeImg(){
				var clienWidth = document.documentElement.clientWidth;
				var clienHeight = document.documentElement.clientHeight;

				var screenImage = $("#imgshow").find('img');
				var theImage = new Image();
				var imageWidth;
				var imageHeight;
				var top;
				var left;
				screenImage.load(function() {
					theImage.src = screenImage.attr("src");
					imageWidth = theImage.width;
					imageHeight = theImage.height;
					var scale = clienWidth/imageWidth;
					if(imageWidth <= clienWidth && imageHeight<=clienHeight)
					{
						top = (clienHeight - imageHeight)/2;
						left = (clienWidth - imageWidth)/2;
					}
					else if(imageWidth <= clienWidth && imageHeight > clienHeight)
					{
						top = 0;
						left = (clienWidth - imageWidth)/2;
					}
					else if(imageWidth > clienWidth && imageHeight < clienHeight)
					{
						imageWidth = clienWidth;
						imageHeight = imageHeight * scale;
						top = (clienHeight - imageHeight)/2;
						left = 0;
					}
					else if(imageWidth > clienWidth && imageHeight > clienHeight)
					{
						
						imageWidth = clienWidth;
						imageHeight = imageHeight * scale;
						//alert("clienWidth=="+clienWidth+";imageWidth=="+imageWidth+";imageHeight=="+imageHeight);
						top = (clienHeight - imageHeight)/2;
						left = 0;
					}


					// alert(imageWidth +"---"+ imageHeight);
					screenImage.css({
						'width': imageWidth + 'px',
						'height': imageHeight + 'px'
					});

					$(".bgclass").css({
						'width': clienWidth + 'px',
						'height': clienHeight + 'px'
					});

					$('#imgshow').css({
						'left': left + 'px',
						'top': top + 'px'
					});
				});
				
				
			}

		</script>

	</head>
	
	<body>
		
		<div class="example">
			<div id="fileTreeDemo_1" class="demo"></div>
		</div>
		<div class="bgclass"></div>
		<div id="imgshow" style="display:none"></div>
		

	</body>
	
</html>